<script setup>
import { computed } from 'vue';
import { spotsInfoStore } from '@/stores/spots';
import MapContainer from '../components/MapContainer.vue';
import Capabiliby from '@/components/Capabiliby.vue';
import User from '@/components/User.vue';
import Classify from '@/components/Classify.vue';
import PlacesView from '@/components/PlacesView.vue';
import ChatAiView from '@/components/ChatAiView.vue';


const spotsStore = spotsInfoStore();
const hasSpots = computed(() => spotsStore.spot.size > 0);
</script>

<template>
  <div id="home">
    <div class="header">
      <div class="left">
        <Capabiliby />
      </div>
      <div class="center">基于WebGIS的河南省旅游研学系统</div>
      <div class="right">
        <User />
      </div>
    </div>
    <div class="main">
      <div class="left">
        <!-- 只有在 spotsStore.spot 有数据时才显示 PlacesView 组件 -->
        <PlacesView v-if="hasSpots" />

      </div>
      <div class="center">
        <!-- 地图组件 -->
        <div id="mapContainer">
          <MapContainer />
        </div>
      </div>
      <div class="right">
        <!-- 只有在 spotsStore.spot 有数据时才显示 Classify 组件 -->
        <Classify v-if="hasSpots && !spotsStore.aiOpen" />
        <ChatAiView v-if="spotsStore.aiOpen" />
      </div>
    </div>
  </div>

</template>

<style lang="scss">
#home {
  background-image: url("../assets/R-C.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;

  .header {
    height: 70px;
    display: flex;
    justify-content: space-around;

    .right {
      flex: 3;
      display: flex;
      justify-content: end;
      line-height: 70px;
    }

    .left {
      flex: 3;
    }

    .center {
      background-image: url("../assets/screen_top_center_bg.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      flex: 6;
      height: 70px;
      line-height: 70px;
      text-align: center;
      font-size: 26px;
      color: black;
    }
  }

  .main {
    display: flex;
    justify-content: center;

    .center {
      margin: 5px 0;
      flex: 8;

      #mapContainer {
        // height: 100%;
        width: 100%;
        border-radius: 25px;
        border: 2px solid #0d54b9;
        overflow: hidden;
      }
    }

    .left {
      width: 400px;
      margin: 5px;

    }

    .right {
      flex: 2;
      margin: 5px;
    }
  }
}



:where(.css-dev-only-do-not-override-19iuou).ant-btn-default {
  background-color: #b3d3f6;
  border-color: #0d54b9;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
</style>
